<template>
  <div class="zhengti">
    <div class="fuzhi">
      <div class="left" @click="left">
        <img
          src="https://ftp.bmp.ovh/imgs/2021/07/3c96888c7a1787f3.png"
          alt=""
        />
      </div>
      <div class="wenzi">肤质变化</div>

      <div class="right" :class="a" v-if="!flag">
        <div class="kepu">科普丨我们的肤质能被改变吗？</div>
        <span>
          人在婴儿时期的肌肤基本都是中性肤质，可是随着年纪变化，进入了青春期，有些人会变成油性肌肤或者混合偏油肌肤。因此的少年是非常多的，这时候护肤需要使用控油消炎的产品，来预防痘痘滋生。青春期长痘痘的少年是非常多的，这时候护肤需要使用控油消炎的产品，来预防痘痘滋生。
        </span>
        <div>
          夏天油脂分泌变多，冬天皮肤油脂分泌减少，因此护肤要按季节变化而变化。而且南方地区湿润炎热，而北方地区寒冷干燥，因此不同地区的人群肤质表现也不一样哦。
        </div>
        <div>
          要灵活的去甄别产品来改善自己的肤质。理想中的肤质是中性，不干不油。希望大家都有成为中性肌肤的可能性
        </div>
        <div class="rightbottom" :class="a" @click="righttu" v-if="!flag">
          我知道了
        </div>
      </div>
      <div class="righttu" @click="righttu" :class="a" v-if="flag">
        <img
          src="https://ftp.bmp.ovh/imgs/2021/07/14248e069f595923.png"
          alt=""
        />
      </div>
    </div>
    <div class="shangxian"></div>
    <div class="daohanglan">
      <van-tabs
        v-model="activeName"
        color="#68dcdc"
        scrollspy
        title-active-color="pink"
        scrollTo="3"
        sticky
      >
        <van-tab title="综合得分"  name="1">
          <!-- 综合得分 -->
          <div class="zonghe">
            <div class="defen">
              <div class="lvse"></div>
              <div class="ziwen">综合得分</div>
            </div>

            <input type="checkbox" />
          </div>

          <!--第一个方框  -->
          <div class="fangkuang">
            <div class="taiyou">100</div>
            <div class="zhengchang">80</div>
            <div class="taigan">60</div>
            <div class="kong"></div>
          </div>
        </van-tab>
        <van-tab title="出油状况"  name="2">
          <!--出油情况  -->
          <div class="zonghe">
            <div class="defen">
              <div class="lvse"></div>
              <div class="ziwen">出油情况</div>
            </div>

            <input type="checkbox" />
          </div>

          <!--第二个方框  -->
          <div class="fangkuang chuyou">
            <div class="taiyou">太油</div>
            <div class="zhengchang">正常</div>
            <div class="taigan">太干</div>
            <div class="kong"></div>
          </div>
        </van-tab>
        <van-tab title="光滑度" name="3">
          <!--光滑度  -->
          <div class="zonghe">
            <div class="defen">
              <div class="lvse"></div>
              <div class="ziwen">光滑度</div>
            </div>

            <input type="checkbox" />
          </div>

          <!--第三个方框  -->
          <div class="fangkuang guanghua">
            <div class="taiyou">蛋壳</div>
            <div class="zhengchang">蛋黄</div>
            <div class="taigan">蛋清</div>
            <div class="kong"></div>
          </div>
        </van-tab>
        <van-tab title="黑眼圈" name="4">
          <!--黑眼圈  -->
          <div class="zonghe">
            <div class="defen">
              <div class="lvse"></div>
              <div class="ziwen">黑眼圈</div>
            </div>

            <input type="checkbox" />
          </div>

          <!--第四个方框  -->
          <div class="fangkuang heiyan">
            <div class="taiyou">重度</div>
            <div class="zhengchang">中度</div>
            <div class="taigan">轻度</div>
            <div class="kong"></div>
          </div>
        </van-tab>
        <van-tab title="痘痘" name="5">
          <!--痘痘  -->
          <div class="zonghe">
            <div class="defen">
              <div class="lvse"></div>
              <div class="ziwen">痘痘</div>
            </div>

            <input type="checkbox" />
          </div>

          <!--第五个方框  -->
          <div class="fangkuang doudou">
            <div class="taiyou">重度</div>
            <div class="zhengchang">中度</div>
            <div class="taigan">轻度</div>
            <div class="kong"></div>
          </div>
        </van-tab>
        <van-tab title="黑头" name="6">
          <!--黑头 -->
          <div class="zonghe">
            <div class="defen">
              <div class="lvse"></div>
              <div class="ziwen">黑头</div>
            </div>

            <input type="checkbox" />
          </div>

          <!--第六个方框  -->
          <div class="fangkuang heitou">
            <div class="taiyou">重度</div>
            <div class="zhengchang">中度</div>
            <div class="taigan">轻度</div>
            <div class="kong"></div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="xiaxian"></div>
    <div class="zhenbang">
      <div class="chenggong">
        真棒！成功记录了1天的肤质数据。每周测肤2天就可以比较好的记录肤质变化了，测得天数越多越准哦~
      </div>
    </div>
  </div>
</template>
😞
<script>
export default {
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    left() {
      this.$router.push("/home/mine");
    },
    righttu() {
      this.flag = !this.flag;
    },
  },
};
</script>

<style lang="less" scoped>
.zhengti {
  position: inherit;
 
  .fuzhi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
    // background: pink;
    font-size: 16px;
    height: 35px;

    .left {
      width: 12px;
      height: 13px;
      // background: green;
      img {
        height: 100%;
      }
    }
    .righttu {
      img {
        width: 19px;
        height: 19px;
        :hover .right {
          display: block;
        }
      }
      :click .right {
        display: block;
      }
    }
    .right {
      // display: none;
      position: absolute;
      z-index: 999;
      width: 85%;
      height: 50%;
      border-radius: 10px;
      top: 30%;
      margin-left: 10px;
      color: pink;
      border: 1px solid black;

      background: white;
      .kepu {
        margin: auto;
        text-align: center;
        color: green;
        font-size: 18px;
        font-weight: 600px;
      }
      .rightbottom {
        position: absolute;
        bottom: 0;
        height: 45px;
        line-height: 45px;
        width: 100%;
        // background:green;
        border-top: 1px solid #ccc;
        font-weight: 600;
        text-align: center;
        color: #68dcdc;
      }
    }
    .wenzi {
      font-size: 16px;
    }
  }
  .shangxian,
  .xiaxian {
    width: 100%;
    height: 5px;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 25px;
  }

  .zhenbang {
    display: flex;
    background: #ecfafa;
    
    font-size: 13px;
    color: #666666;
    width: 90%;
    height: 60px;
    margin: auto;
    margin-bottom:300px;
    border-radius: 40px;
    .chenggong {
      width: 90%;
      margin: auto;
    }
  }
  .zonghe {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    width: 90%;
    .defen {
      display: flex;
      // justify-content: space-between;
      .lvse {
        width: 5px;
        height: 20px;
        background: #68dcdc;
        margin-right: 10px;
        margin-left: 20px;
      }
      .ziwen {
        font-size: 19px;
        font-weight: 600;
      }
    }
    .ri {
      font-size: 12px;
      width: 66px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      background: #eeeeee;
      border-radius: 12px;
    }
    input[type="checkbox"] {
      -webkit-appearance: none;
      width: 55px;
      height: 22px;
      border-radius: 10px;
      border: 1px solid #c1c1c1;
      background: #eeeeee;
      position: relative;
      transition: 1s;
    }

    input[type="checkbox"]::before {
      content: " 日";
      display: block;
      text-indent: 5px;
    }

    input[type="checkbox"]::after {
      content: "周";
      display: block;
      width: 33px;
      height: 24px;
      border-radius: 30px;
      text-indent: 10px;
      background: white;
      position: absolute;
      left: -2px;
      top: -3px;
      transition: 1s;
    }

    /* 滑动效果 */

    input[type="checkbox"]:checked {
      background: #eeeeee;
      position: relative;
    }

    input[type="checkbox"]:checked::after {
      /* position: absolute; */
      left: 22px;
    }
  }
  .fangkuang {
    font-size: 14px;
    width: 90%;
    background: #e4f9fa;
    margin: auto;
    height: 215px;
    border-radius: 15px;
    text-indent: 300px;
    margin-top: 30px;
    .taiyou,
    .zhengchang,
    .taigan {
      width: 100%;
      height: 60px;
      // background: pink;
      line-height: 60px;
      border-bottom: 1px dashed #999999;
    }
    .taigan {
      border-bottom: 1px solid #999;
    }
  }
  .chuyou {
    background: #fff4de;
  }
  .guanghua {
    background: #edfcdf;
  }
  .heiyan {
    background: #f1f4fd;
  }
  .doudou {
    background: #ffeded;
  }
  .heitou {
    background: orange;
  }
}
</style>